<template>
  <el-tree id="tree" :data="departs" default-expand-all node-key="id" ref="tree" :default-checked-keys="defaultKeys" :highlight-current="true" :props="defaultProps" @node-click="itemClick">
  </el-tree>
</template>
<script>
export default {
  name: 'departTree',
  data() {
    return {
      departs: [],
      defaultProps: {
        children: 'subDepartments',
        label: 'name'
      },
      defaultKeys: []
    }
  },
  mounted: function() {
    this.loadTreeData();
  },
  methods: {
    loadTreeData() {
      //this.$http.get('/data/departments.json')
      this.$http.post('/hr/department/list')
        .then(response => {
          this.showDepart(response)
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    rescurTree(treeData){
      for (var index in treeData) {
        if( treeData[index].subDepartments){
          this.rescurTree(treeData[index].subDepartments);
        }
        else{
          treeData[index].subDepartments = new Array()
        }
      }
    },
    showDepart(response) {
      let treeData = JSON.parse(response.bodyText).body
      this.rescurTree(treeData)
      this.departs = treeData
      if (this.departs && this.departs.length > 0) {
        this.defaultKeys.push(this.departs[0].id)
        this.$emit('nodechange', this.departs[0])
      }
    },
    rescurAddChildNode(id, node) {
      for (var index in this.departs) {
        if (this.resAddNode(this.departs[index], id, node)) {
          break;
        }
      }
    },
    addChildren(node,subNode){
      if(!node.subDepartments){
        node.subDepartments = new Array()
      }
      node.subDepartments.push(subNode)
    },
    resAddNode(parentNode, id, subNode) {
      if (parentNode.id == id) {
        this.addChildren(parentNode,subNode)
        this.$emit('node-click', parentNode)
        return true
      }
      else {
        for (var child in parentNode.subDepartments) {
          if (this.resAddNode(parentNode.subDepartments[child], id, subNode)) {
            return true
          }
        }
      }
      return false
    },
    rescurDelNode(id) {
      for (var index in this.departs) {
        if (this.departs[index].id == id) {
          this.departs.splice(index, 1)
          break;
        }
        else {
          if (this.resDelNode(this.departs[index], id)) {
            break;
          }
        }
      }
    },
    resDelNode(parentNode, id) {
      if (parentNode.subDepartments.length > 0) {
        if(!parentNode.subDepartments){
          return false
        }
        for (var index in parentNode.subDepartments) {
          if (parentNode.subDepartments[index].id == id) {
            parentNode.subDepartments.splice(index, 1)
            return true
          }
          if(parentNode.subDepartments[index].subDepartments.length >0){
            if(this.resDelNode(parentNode.subDepartments[index],id)){
              return true;
            }
          }
        }
      }
      return false
    },
    itemClick(node) {
      // 获取所选节点的详细信息
      this.$emit('nodechange', node)
    }
  },
  components: {
  }
}
</script>
<style>
.treeMargin {
  margin-left: 0.5rem;
}

#tree {
  border: 0px solid #d1dbe5;
}






/* .label {
    background-color:transparent; 
    color: #5e5e5e;
    font-family: 'Open Sans';
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    text-shadow: none;
} */
</style>
